<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>工资明细</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody table-bordered">
        <table v-if="detailOption.length">
<!--          <tr>-->
<!--            <th></th>-->
<!--            <th colspan="4">基本工资</th>-->
<!--            <th colspan="6">月发工资</th>-->
<!--            <th colspan="2">社保</th>-->
<!--            <th colspan="2">公积金</th>-->
<!--            <th>代扣</th>-->
<!--            <th></th>-->
<!--            <th colspan="3">工资收入</th>-->
<!--            <th></th>-->
<!--          </tr>-->
          <tr>
            <th v-for="item in detailOption">{{item.th}}</th>
          </tr>
          <tr class="td-name">
            <td v-for="item in detailOption">{{item.td}}</td>
          </tr>
        </table>
        <div v-else>
          未找到相应数据，确保数据类型格式
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button size="small" type="primary" @click="closePOpup">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['visible', 'wagesDetail'],
  components: {},
  data() {
    return {
      dialogVisible: false,
      detailOption: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if(this.wagesDetail.detail){
          let list_ = JSON.parse(this.wagesDetail.detail)
          let table_ = []
          for(let index in list_){
            table_.push({
              th: index,
              td: list_[index]
            })
          }
          console.log('table_:', table_)
          this.detailOption = JSON.parse(JSON.stringify(table_))
        }
      } else {
        this.detailOption = []
      }
    }
  },
  created() {

  },
  methods: {
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  /*height: 350px;*/
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

table th {
  height: 50px;
  background: #dfefff;
}

table td {
  text-align: center;
  padding: 10px;
}

.table-bordered tr td, .table-bordered tr th {
  border: 1px solid #ddd;
}

.table-bordered td {
  padding: 8px;
  line-height: 1.42857143;
}

.td-name td {
  min-width: 90px;
}
</style>


